<template>
    <div id="load">
        <div class="header">
               <img src="~@/assets/csdn.png" alt="">   
        </div>
        <hr/>
        <div id="chs">
            <li><span class="load">免密登录</span></li>
            <li><span class="sign">账号登录</span></li>
        </div>
        <form action="" class="form_load1">
             <div class="div_phone">
                 <input type="text" class="phone" placeholder="手机号">
             </div>
             <div class="div_getcode">
                     <input type="text" class="code" placeholder="6位数字验证码">
                     <button type="submit"><p>获取验证码</p></button>
             </div>
             <div class="div_pic">
                     <input type="text" class="picCode" placeholder="获取验证码"><button class="picRandom"><img src="~@/assets/pic.png" alt=""></button>
             </div>    
              <button type="submit" class="csdn_load"><p>登录</p></button>
              <button type="submit" class="qq_load"><p>QQ注册</p></button>
              <button type="submit" class="qqemail_load"><p>QQ邮箱注册</p></button>
              
        </form>
        <from class="form_load2">
            <div class="div_phone">
                 <input type="text" class="phone" placeholder="手机号/qq邮箱/qq号">
             </div>
             <div class="div_phone">
                 <input type="text" class="phone" placeholder="密码">
             </div>
            <button type="submit" class="csdn_load"><p>登录</p></button>

        </from>
    </div>
</template>
<script setup>
</script>
<style  scoped>
.div_pic{
    width: 96%;
    height: 41px;
    margin-top: 30px;
    position: relative;
}
input.picCode{ 
    height: 100%;
    width:70% ;
}
button.picRandom{ 
    width:28%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}
button.picRandom img{
    height: 100%;
    width: 100%;
}
div#load{
    width: 500px;
    height: 800px;
    margin: 0 auto;
    border: 1px solid rgb(226, 219, 219);
}
.header{
    width: 100%;
    height: 60px;
    text-align: center;

}
 #load .header img{
     width:50%;
     height: 100%;
 }
 #chs{
     border: 1px solid rgb(226, 219, 219);
     width: 100%;
     height: 88px;
     border-top: none;
     position: relative;
 }
 #chs li{
     width: 50%;
     height: 100%;
     text-align: center;
     display: inline-block;
     position: relative;
    
 }
 #chs li:hover{ 
     border-bottom:3px solid red ;
 }
 #chs li span{
     position: absolute;
     bottom: 0;
     left: 70px;
     color: rgb(8, 8, 8);
     font-size: 1.2em;
 }
 form{
     width: 100%;
     height: auto;
 }
.div_phone{
    width: 96%;
    margin-top:32px;
    height: 50px;
    text-align: center;

}
input.phone{
    width: 96%;
    height: 100%;
    border-radius: 3px;
}
.div_getcode{
    width: 96%;
    margin-top:32px;
    height: 45px;
    text-align: center;

}
input.code{
    width: 76%;
    height: 100%;
}
.div_getcode button{
    background: #00a1d6;
    border: none;
    border-radius: 3px;
}
button.csdn_load{
        display: block;
        margin-top:30px;
        width: 96%;
        height: 53px;
        background: rgb(204, 206, 211);
        border:none;
        color: cornflowerblue;
        font-size: 1.2em;
}
button.csdn_load p{
    line-height: 100%;
    transition: 0.8s;

}
button.csdn_load:hover{ 
    background: aqua;
}
.form_load2{
    display: none;

}
  button.qq_load{
      display: block;
      margin-top: 20px;
      background: rgb(176, 205, 243);
      width: 96%;
      border:none;
      transition: 0.8s;
  }
  button.qq_load:hover{
      background:rgb(3, 59, 107);
  }
  button.qqemail_load{
      display: block;
      margin-top: 20px;
      background: rgb(216, 228, 243);
      width: 96%;
      border:none;
      transition: 0.8s;
  }
  button.qqemail_load:hover{
      background:rgb(17, 128, 122);

  }
  
</style>